<template>
  <nav id="nav">
    <div className="container">
      <div className="logo">
        <div className="ccc">
          <div className="l">
            <svg
              t="1664419227736"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4710"
              width="50"
              height="50"
            >
              <path
                d="M204.58281 67.475763 59.679642 340.902195 59.679642 67.475787 204.582845 67.475787 204.58281 67.475763zM115.347866 426.045338 234.876006 67.475763l150.635972 0L115.347866 426.045338zM211.135386 535.742771 425.626214 67.475763l207.128938 0L211.135386 535.742771zM211.135386 711.751373 686.789018 67.475763l286.537728-3.273523L211.135386 711.751373zM820.231782 956.525261l144.088576-274.246042 0 274.246061L820.231741 956.52528 820.231782 956.525261zM908.647014 597.141094 789.123994 956.525261 638.482885 956.525261 908.647014 597.141094zM812.864614 487.443763 597.548954 956.525261 390.425098 956.525261 812.864614 487.443763zM812.864614 311.435059 337.210982 956.525261l-286.537728 3.273523L812.864614 311.435059zM812.864614 311.435059"
                p-id="4711"
                fill="#000000"
              ></path>
            </svg>
          </div>
          <div className="t">
            <p class="title">Hacker</p>
          </div>
        </div>
      </div>
      <div className="search">
        <div className="ipt">
          <el-input
            v-model="keywords"
            class="w-50 m-2"
            placeholder=""
            :suffix-icon="Search"
            size="small"
          />
          <div class="none" @click="searchWhatYouWant"></div>
        </div>
      </div>
      <div className="usercenter">
        <div className="center_p">
          <div className="avatar">
            <img
              src="	https://p3-passport.byteimg.com/img/user-avatar/6e36a1f3b6989f22fa685ccce623a66c~100x100.awebp"
              alt=""
            />
          </div>
          <div className="meaasge">
            <svg
              t="1664421647742"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4910"
              width="20"
              height="20"
            >
              <path
                d="M252.672 724.7104c3.3792 12.1856 9.3184 32.0256 13.184 44.0832l55.5264 172.8256c3.8656 12.0576 17.3824 21.9136 30.0544 21.9136h65.1776c12.6464 0 21.76-10.2656 20.224-22.8352l-28.9536-238.0544a26.7008 26.7008 0 0 0-25.7792-22.8352h-118.8608c-12.6464 0-20.2496 9.984-16.8704 22.1696l6.2976 22.7328z"
                fill="#2c2c2c"
                p-id="4911"
              ></path>
              <path
                d="M258.816 746.88h238.9248c142.9504 0 258.816-115.8656 258.816-258.816H0c0 142.9504 115.8912 258.816 258.816 258.816z"
                fill="#2c2c2c"
                p-id="4912"
              ></path>
              <path
                d="M497.7408 229.248H258.816C115.8912 229.248 0 345.1136 0 488.064h756.5568c0-142.9504-115.8912-258.816-258.816-258.816z"
                fill="#2c2c2c"
                p-id="4913"
              ></path>
              <path
                d="M955.4176 434.3808h-153.2928a68.5056 68.5056 0 0 0-66.8416 53.6832h287.0016a68.5568 68.5568 0 0 0-66.8672-53.6832z"
                fill="#2c2c2c"
                p-id="4914"
              ></path>
              <path
                d="M735.2832 488.064a68.1472 68.1472 0 0 0-1.7152 14.8992 68.608 68.608 0 0 0 68.5824 68.5824h153.2928a68.608 68.608 0 0 0 68.5824-68.5824c0-5.1456-0.6656-10.0864-1.7408-14.8992H735.2832z"
                fill="#2c2c2c"
                p-id="4915"
              ></path>
              <path
                d="M914.3808 114.2272c0-38.1184-29.1328-61.056-63.6672-51.6352L530.7648 149.9904c-20.9664 5.7344-37.4528 33.1008-37.4528 61.312v276.736h421.0688V114.2272z"
                fill="#2c2c2c"
                p-id="4916"
              ></path>
              <path
                d="M493.312 488.064v276.736c0 28.2112 16.4864 55.6032 37.4528 61.312l319.9744 87.3984c34.5344 9.4208 63.6672-13.5168 63.6672-51.6352V488.064H493.312z"
                fill="#2c2c2c"
                p-id="4917"
              ></path>
            </svg>
          </div>
          <div className="setting">
            <svg
              t="1664421684640"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5162"
              width="20"
              height="20"
            >
              <path
                d="M940 596l-76-57.6c0.8-8 1.6-16.8 1.6-26.4s-0.8-18.4-1.6-26.4l76-57.6c20.8-16 26.4-44 12.8-68l-84.8-143.2c-9.6-16.8-28-27.2-47.2-27.2-6.4 0-12 0.8-18.4 3.2L712 228c-15.2-10.4-31.2-19.2-47.2-26.4l-13.6-92c-4-26.4-26.4-45.6-53.6-45.6H426.4c-27.2 0-49.6 19.2-53.6 44.8L360 201.6c-16 7.2-31.2 16-47.2 26.4l-90.4-35.2c-6.4-2.4-12.8-3.2-19.2-3.2-19.2 0-37.6 9.6-46.4 26.4L71.2 360c-13.6 22.4-8 52 12.8 68l76 57.6c-0.8 9.6-1.6 18.4-1.6 26.4s0 16.8 1.6 26.4l-76 57.6c-20.8 16-26.4 44-12.8 68l84.8 143.2c9.6 16.8 28 27.2 47.2 27.2 6.4 0 12-0.8 18.4-3.2L312 796c15.2 10.4 31.2 19.2 47.2 26.4l13.6 92c3.2 25.6 26.4 45.6 53.6 45.6h171.2c27.2 0 49.6-19.2 53.6-44.8l13.6-92.8c16-7.2 31.2-16 47.2-26.4l90.4 35.2c6.4 2.4 12.8 3.2 19.2 3.2 19.2 0 37.6-9.6 46.4-26.4l85.6-144.8c12.8-23.2 7.2-51.2-13.6-67.2zM704 512c0 105.6-86.4 192-192 192S320 617.6 320 512s86.4-192 192-192 192 86.4 192 192z"
                p-id="5163"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();
const keywords = ref("");
const searchWhatYouWant = () => {
  console.log(keywords.value);
  router.push({
    name: "SDetail",
    params: {},
  });
};
</script>

<style scoped lang="scss">
#nav {
  width: 100%;
  margin: 0 auto;
  // position: fixed;
  height: 80px;
  background-color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  .container {
    width: 100%;
    height: 100%;
    position: relative;
    .logo,
    .usercenter {
      position: absolute;
      top: 0;
      width: 400px;
    }
    .logo,
    .usercenter,
    .search {
      height: 80px;
    }
    .logo {
      left: 0;
      .ccc {
        display: flex;
        position: absolute;
        left: 15%;
        top: 15px;
        .l {
        }
        .t {
          height: 50px;
          color: #000;
          font-size: 25px;
          font-weight: 900;
        }
      }
    }
    .usercenter {
      right: 0;
      .center_p {
        display: flex;
        width: 100px;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .message {
        }
        .setting {
        }
      }
    }
    .search {
      margin-left: 400px;
      margin-right: 400px;
      .ipt {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // -webkit-transform: translate(50%, -50%);
        transition: 1.5s;
        -webkit-transition: 1.5s;
        .el-input {
          width: 300px;
        }
        .none {
          width: 21px;
          height: 23px;
          background-color: #000;
          position: absolute;
          top: 2px;
          right: 0;
          opacity: 0;
        }
      }
    }
  }
}
@media only screen and (max-width: 1200px) {
  #nav {
    // position: relative;
    background-color: #fff;
    height: 100%;
    .container {
      height: 100%;
      .logo,
      .usercenter {
        width: 50%;
      }
      .logo {
        .t {
          font-size: 20px;
        }
      }
      .search {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transition: 1.5s;
        -webkit-transition: 1.5s;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
      }
      .search {
        width: 100%;
        top: 100px;
        margin: 0;
      }
    }
  }
}
</style>
